<template>
  <div class="app-container">
    <div class="filter-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>总账户信息</span>
        </div>
        <div class="text item">
          <el-row style="margin-bottom:20px">
            <el-col :span="8">
              <div class="grid-content ">
                当前金额：{{ totalAccount.currentMoney }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content ">
                总交易金额：{{ totalAccount.totalMoney }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content ">
                总转账金额（扣除手续费）：{{ totalAccount.alreadyMoney }}
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.startDay"
        value-format="yyyy-MM-dd"
        type="datetime"
        placeholder="选择开始日期"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.endDay"
        value-format="yyyy-MM-dd"
        type="datetime"
        placeholder="选择结束日期"
        style="width: 200px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>

    <el-table
      :key="key"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        prop="earlyDate"
        label="期初日期"
        align="center"
        width=""
      />
      <el-table-column
        prop="earlyMoney"
        label="期初金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="date"
        label="期末日期"
        align="center"
        width=""
      />
      <el-table-column
        prop="currentMoney"
        label="期末金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="totalMoney"
        label="当日总交易金额"
        align="center"
        width=""
      />
      <el-table-column
        prop="alreadyMoney"
        label="当日总转账金额"
        align="center"
        width=""
      />

    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>
<script>
  const defaultFormThead = ['apple', 'banana']
  import {totalDayAccount} from '@/api/v1'
  import waves from '@/directive/waves' // Waves directive
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {parseTime} from '@/utils'

  export default {
    directives: {waves},
    components: {Pagination},
    data() {
      return {
        totalAccount: null,
        tableData: [],
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        cooperation: [],
        listQuery: {
          page: 1,
          limit: 20,
          sort: '+id',
          phone: '',
          startDay: '',
          endDay: ''
        },
        key: 1, // table key
        formTheadOptions: ['apple', 'banana', 'orange'],
        checkboxVal: defaultFormThead, // checkboxVal
        formThead: defaultFormThead // 默认表头 Default header
      }
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        )
        this.key = this.key + 1 // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },
    created() {
      const id = this.$route.query.id
      this.listQuery.cooperation = id
      console.log(id)
      this.getList()
    },
    methods: {
      // getCooperationTrade: function(id) {
      //   getCooperationTrade({ id: id })
      //     .then(response => {
      //       this.tableData = response.data.items;
      //     })
      //     .catch(err => {
      //       console.log(err);
      //     });
      // },
      handleDownload() {
        down(this.listQuery).then(res => {
          console.log(res)
          this.$router.push({
            path: '/down'
          })
        })
      },
      getList() {
        this.listLoading = true
        totalDayAccount(this.listQuery).then(res => {
          this.tableData = res.data.data.records
          this.total = Number(res.data.data.total)
          this.totalAccount = res.data.map.totalAccount;
          console.log(this.totalAccount)
          // Just to simulate the time of the request
          this.listLoading = false
        })
      },
      getCooperationAll() {
        cooperationAll().then(res => {
          this.cooperation = res.data

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>

